<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>v-on</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<div id='app'>
		<!--绑定单个事件-->
		<button v-on:click='clickName'>点我</button>
		<!--简写-->
		<button @click='clickName'>简写</button>
		<!--绑定多个事件, 注意事件函数名不用加引号-->
		<button v-on="{mouseenter: enter, mouseover: over, mouseleave: leave}">多个事件</button>
		<!--表单事件提交阻止默认事件, 注意事件对象的洗发: $event-->
		<form v-on:submit='onSubmit($event)'>
			<input type='text'>
			<button type='submit'>提交</button>
		</form>
		<!--利用vue提供的方法, 不用传事件对象-->
		<form v-on:submit.prevent='onSubmitpre()'>
			<input type='text'>
			<button type='submit'>提交</button>
		</form>
	</div>
	<script src='../lib/vue.js'></script>
	<script src='./app.js'></script>
	<script>
		// v-on 是用来绑定事件的, 写法是在v-on:事件名 = 事件函数名, 事件函数写在methods: 对象里
		// 绑定多个事件的语法是v-on="{事件名: 事件函数名, 事件名: 事件函数名}"
		// vue 的时间绑定后还可以有.prevent 阻止默认事件或阻止冒泡事件.stop的简便写法, 非常人性化
		// 键盘事件: v-on:keyup.enter 直接判断用户输入的是不是enter键而不用在函数中传入事件代理再进行判断, 非常的人性化
	</script>
</body>

</html>